<template>
  <div>
    <div class="first_title">资质信息</div>
    <div class="infocontent_line">
      <el-form-item label="营业执照" prop="businesslicUrl">
        <el-upload
          class="avatar-uploader"
          :action="this.EnclSurebaseurl"
          :show-file-list="false"
          :on-success="Businesslic_Success"
        >
          <img
            v-if="
              Cpnform.businesslic_Url != '' &&
              Cpnform.businesslic_Url != null &&
              Cpnform.businesslic_Url != undefined
            "
            width="40"
            height="40"
            :src="Cpnform.businesslic_Url"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <span class="spanshow" @click="Cpnform.businesslicdialogVisible = true"
          >查看示列</span
        >
        <span
          class="spanshow2"
          v-show="
            Cpnform.businesslic_Url != '' &&
            Cpnform.businesslic_Url != null &&
            Cpnform.businesslic_Url != undefined
          "
          @click="shoubigimg(Cpnform.businesslic_Url)"
          >查看大图</span
        >
      </el-form-item>
    </div>
    <div class="cpninfo" style="width:100%">
      <div class="infocontent_line">
        <el-form-item label="经营类型">
          <el-select
            v-model="Cpnform.mngeTyp"
            placeholder="请选择"
            prop="mngeTyp"
            style="width:100%"
          >
            <el-option
              v-for="item in MngeTypoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册号" prop="regNo">
          <el-input type="number" v-model="Cpnform.regNo"></el-input>
        </el-form-item>
      </div>

      <div class="infocontent_line">
        <el-form-item label="注册名称" prop="regName">
          <el-input v-model="Cpnform.regName"></el-input>
        </el-form-item>
        <!--
            <el-form-item label="资质类型">
          <el-select v-model="Cpnform.qalTyp" placeholder="请选择">
            <el-option
              v-for="item in QalTypoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
         -->
        <el-form-item label="执照有效期" prop="busdt">
          <el-date-picker
            v-model="Cpnform.busdt"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :disabled="Cpnform.isLongDt"
          >
            >
          </el-date-picker>
          <el-checkbox
            v-model="Cpnform.isLongDt"
            style="position: absolute; margin-left: 30px"
            >长期</el-checkbox
          >
        </el-form-item>
      </div>
    </div>

    <div class="infocontent_line">
      <div class="pcd">
        <el-form-item label="注册地址">
          <el-select
            v-model="Cpnform.prv"
            filterable
            clearable
            placeholder="请选择省份"
            @change="PrvChangeFn($event)"
          >
            <el-option
              v-for="item in this.provinceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="Cpnform.cty"
            filterable
            clearable
            placeholder="请选择城市"
            @change="CtyChangeFn($event)"
          >
            <el-option
              v-for="item in this.cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="Cpnform.dit"
            filterable
            clearable
            placeholder="请选择区县"
          >
            <el-option
              v-for="item in this.districtOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="cpninfo">
        <el-form-item label="详细地址">
          <el-input v-model="Cpnform.addr"></el-input>
        </el-form-item>
      </div>
    </div>

    <div class="infocontent_line">
      <el-form-item label="法人身份证人像面" prop="iDperson_Url">
        <el-upload
          class="avatar-uploader"
          :action="this.EnclSurebaseurl"
          :show-file-list="false"
          :on-success="IDperson_Success"
        >
          <img
            v-if="
              Cpnform.iDperson_Url != '' &&
              Cpnform.iDperson_Url != null &&
              Cpnform.iDperson_Url != undefined
            "
            width="40"
            height="40"
            :src="Cpnform.iDperson_Url"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <span class="spanshow" @click="Cpnform.iDpersondialogVisible = true"
          >查看示列</span
        >
        <span
          class="spanshow2"
          v-show="
            Cpnform.iDperson_Url != '' &&
            Cpnform.iDperson_Url != null &&
            Cpnform.iDperson_Url != undefined
          "
          @click="shoubigimg(Cpnform.iDperson_Url)"
          >查看大图</span
        >
      </el-form-item>
      <div class="Nationalemblem">
        <el-form-item label="法人身份证国徽面" prop="nationalemblem_Url">
          <el-upload
            class="avatar-uploader"
            :action="this.EnclSurebaseurl"
            :show-file-list="false"
            :on-success="Nationalemblem_Success"
          >
            <img
              v-if="
                Cpnform.nationalemblem_Url != '' &&
                Cpnform.nationalemblem_Url != null &&
                Cpnform.nationalemblem_Url != undefined
              "
              width="40"
              height="40"
              :src="Cpnform.nationalemblem_Url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <span
            class="spanshow"
            @click="Cpnform.nationalemblemdialogVisible = true"
            >查看示列</span
          >

          <span
            class="spanshow2"
            v-show="
              Cpnform.nationalemblem_Url != '' &&
              Cpnform.nationalemblem_Url != null &&
              Cpnform.nationalemblem_Url != undefined
            "
            @click="shoubigimg(Cpnform.nationalemblem_Url)"
            >查看大图</span
          >
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken, TipConfirm } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { Jurisdiction } from "@/api/common";
import sessionStorage from "@/api/Storage";
import commconfig from "@/comm.json";
import "url-search-params-polyfill";
export default {
  props: {
    Cpnform: null,
  },
  data() {
    return {
      chart: null,
      fileList: [],
      EnclSurebaseurl: "",
      BusinesslicdialogVisible: false,
      IDpersondialogVisible: false,
      NationalemblemdialogVisible: false,
      provinceOptions: [],
      cityOptions: [],
      districtOptions: [],
      MngeTypoptions: [
        {
          value: 0,
          label: "线下标准类",
        },
        {
          value: 1,
          label: "线上标准类",
        },
      ],
      QalTypoptions: [
        {
          value: 0,
          label: "个体户",
        },
        {
          value: 1,
          label: "个体/企业户",
        },
      ],
    };
  },
  watch: {
    Cpnform: {
      deep: true,
      handler(val) {
        backstage.GetProvinceListItems(this);
        backstage.GetCityListItems(this);
        backstage.GetDistrictListItems(this);
      },
    },
  },
  mounted() {
    backstage.GetProvinceListItems(this);
    backstage.GetCityListItems(this);
    backstage.GetDistrictListItems(this);
  },
  created() {
    this.EnclSurebaseurl = commconfig.baseapi + "UploadFileAttch";
  },
  methods: {
    shoubigimg(url) {
      this.Cpnform.showbigdialogVisible = true;
      this.Cpnform.showbigurl = url;
    },
    PrvChangeFn(e) {
      backstage.GetCityListItems(this);
    },
    CtyChangeFn(e) {
      backstage.GetDistrictListItems(this);
    },
    FileError(err, file, fileList) {},
    Businesslic_Success(res, file) {
      //营业执照
      var fileurl = JSON.parse(res.data)[file.name];
      this.Cpnform.businesslic_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Businesslic", res, file);
    },
    IDperson_Success(res, file) {
      //身份证人像面
      this.Cpnform.iDperson_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "IDperson", res, file);
    },
    Nationalemblem_Success(res, file) {
      //省份证国徽面
      this.Cpnform.nationalemblem_Url = JSON.parse(res.data)[file.name];
      backstage.EnclsureHand(this, "Nationalemblem", res, file);
    },
  },
};
var backstage = {
  GetProvinceListItems: function (thisobj) {
    SelectAjax(
      "GetProvince?isEmpty=false&provinceId=" + thisobj.Cpnform.Prv + "",
      function (response) {
        var body = response.data;
        thisobj.provinceOptions = [];
        body.data.forEach((element) => {
          thisobj.provinceOptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetCityListItems: function (thisobj) {
    SelectAjax(
      "GetCity?isEmpty=false&provinceId=" +
        thisobj.Cpnform.prv +
        "&cityId=" +
        thisobj.Cpnform.cty +
        "",
      function (response) {
        var body = response.data;
        thisobj.cityOptions = [];
        body.data.forEach((element) => {
          thisobj.cityOptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetDistrictListItems: function (thisobj) {
    SelectAjax(
      "GetDistrict?isEmpty=false&cityId=" +
        thisobj.Cpnform.cty +
        "&districtId=" +
        thisobj.Cpnform.dit +
        "",
      function (response) {
        var body = response.data;
        thisobj.districtOptions = [];
        body.data.forEach((element) => {
          thisobj.districtOptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  EnclsureHand: function (thisobj, key, res, file, fileurl) {
    var ispush = true;
    var fileurl = JSON.parse(res.data)[file.name];
    thisobj.Cpnform.cpnenclsures.forEach((a) => {
      if (a.key == key) {
        ispush = false;
        a.name = file.name;
        a.uid = file.uid;
        a.data = file.response.data;
        a.fileurl = fileurl;
      }
    });
    if (ispush) {
      thisobj.Cpnform.cpnenclsures.push({
        key: key,
        name: file.name,
        uid: file.uid,
        fileurl: fileurl,
      });
    }
  },
};
</script>
<style scoped>
.infocontent_line {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}
.spanshow {
  position: relative;
  top: 70px;
  color: #3b5daf;
  cursor: pointer;
}
.spanshow2 {
  position: relative;
  top: 95px;
  color: #3b5daf;
  cursor: pointer;
  left: -51px;
}
.Nationalemblem {
  margin-left: 140px;
}
.cpn_title {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 600;
  color: #304156;
  opacity: 1;
}
.title {
  width: 100%;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  display: flex;
  height: 95px;
  margin: -40px 0px -14px 0px;
}
.pcd {
  margin-right: 70px;
}
.cpninfo .el-form-item__content{
  width: 100% !important;
}
</style>